<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '民宿详情',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <NavBar />
  <view class="detail-page" v-if="hotelInfo.id">
    <!-- 酒店信息 -->
    <HotelInfo :hotel="hotelInfo" />

    <!-- 房型列表 -->
    <RoomList
      :hotel="hotelInfo"
      @dateDialogState="dateDialogChange"
      @placeOrde="placeOrde"
      @dateChange="getData()"
    />

    <!-- 艺术家笔记 -->
    <!-- <Note /> -->

    <!-- 房屋设施 -->
    <Facilities :hotel="hotelInfo" />

    <!-- 艺术家推荐 -->
    <Artist :hotel="hotelInfo" />

    <!-- 房客店点评 -->
    <Evaluate :hotel="hotelInfo" />

    <!-- 房东信息 -->
    <Homeowner :hotel="hotelInfo" />

    <!-- 预定须知 -->
    <Notice :hotel="hotelInfo" />

    <BottomBar
      :hotel="hotelInfo"
      @getData="getData()"
      @placeOrde="placeOrde"
      v-if="!dateDialogStatus"
    />
  </view>
  <Seat v-else :loading="loading" />
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/index'
import { useHotelSearch } from '@/store/hotelSearch'
import { msgNone } from '@/utils/index'
import HotelInfo from './components/HotelInfo.vue'
import RoomList from './components/RoomList.vue'
import Note from './components/Note.vue'
import Facilities from './components/Facilities.vue'
import Artist from './components/Artist.vue'
import Evaluate from './components/Evaluate.vue'
import Notice from './components/Notice.vue'
import Homeowner from './components/Homeowner.vue'
import BottomBar from './components/BottomBar.vue'
import { to } from '@/utils/page'

const appStore = useUserStore()

// 日期选择组件显示时，需要将层级提高，否则会遮不住底部tabbar
const dateDialogStatus = ref(false)
function dateDialogChange(e) {
  dateDialogStatus.value = e
}

let id = null
onLoad((query) => {
  if (query.id) {
    id = query.id
    getData()
  }
})

const hotelSearch = useHotelSearch()
const hotelInfo = ref<any>({})
const loading = ref(false)

function getData() {
  if (id) {
    loading.value = true
    uni.showLoading()
    http
      .get('/hotels-layout-app/open/detail', {
        id,
        enterDate: hotelSearch.searchInfo.startDate + ' 00:00:00',
        leaveDate: hotelSearch.searchInfo.endDate + ' 23:59:59',
      })
      .then((res: any) => {
        hotelInfo.value = res
      })
      .finally(() => {
        loading.value = false
        uni.hideLoading()
      })
  }
}

// 下单
function placeOrde(hotel) {
  if (hotel.emptyRoomNum > 0) {
    if (appStore.isLogged) {
      to('/pages-sub/hotel/place-order/index', { id: hotel.id })
    } else {
      appStore.setShowModal(true)
    }
  } else {
    msgNone('房型已售空')
  }
}
</script>

<style lang="scss" scoped>
.detail-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 160px;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 160rpx) !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx) !important;
  background-color: var(--bgc4);
}
</style>
